<template>
 <StackLayout class="cell" height="150">
  <GridLayout class="top" height="70" columns="*, auto, auto, auto, auto">
    <label class="symbol" col="0" :text="coin.coinSymbol" verticalAlignment="center"/>
    <label v-if="coin.allowDeposit" class="action1" col="1" text="Receive" @tap="depositPressed" verticalAlignment="center"/>
    <label v-if="coin.allowWithdraw" class="action2" col="2" text="Send" @tap="withDrawPressed" verticalAlignment="center"/>
    <label class="action3" col="3" text="Trade" @tap="tradePressed" verticalAlignment="center"/>
    <image col="4" src="~/images/three-dots.png" class="dots" @tap="tradePressed" verticalAlignment="center"/>
  </GridLayout>
  <GridLayout columns="2*, 2*, 3*" rows="auto, auto">
    <label class="label" col="0" row="0" text="Available"/>
    <label class="label" col="1" row="0" text="On Order"/>
    <label class="label" col="2" row="0" text="Estimated(USD)" horizontalAlignment="right"/>
    <label class="cell-content" col="0" row="1" :text="coin.available.toFixed(6)"/>
    <label class="cell-content" col="1" row="1" :text="coin.onOrders.toFixed(6)"/>
    <label  class="cell-content" col="2" row="1" :text="valuation" horizontalAlignment="right"/>
  </GridLayout>
</StackLayout>
</template>

<script>
import Deposit from '~/components/Deposit'
import Withdraw from '~/components/Withdraw'
import {dataBus} from '~/business/DataBus'
const platform = require("tns-core-modules/platform")

export default {
  props: ['coin'],
  computed: {
    valuation() {
      return this.coin.usdValuation.toFixed(2)
    },
    isAndroid() {
      return platform.isAndroid
    }
  },
  methods: {
    depositPressed() {
      const self = this
      this.$navigateTo(Deposit, {
        props: {
          symbol: self.coin.coinSymbol
        }
      })
    },
    withDrawPressed() {
      const self = this
      this.$navigateTo(Withdraw, {
        props: {
          symbol: self.coin.coinSymbol,
        }
      })
    },
    tradePressed() {
      const quotes = dataBus.wallet.quoteSymbols
      let pairs = []
      quotes.forEach(item => {
        pairs.push(this.coin.coinSymbol + '/' + item)
      })
      action("Please select a trading pair", "Cancel", pairs)
      .then(result => {
        if (result != 'Cancel') {
           dataBus.changeAppIndex(3, {
            isSell: true,
            pair: result,
        })
        }
      });
    }
  }
}
</script>

<style scoped>
  .cell {
    padding-left: 12;
    padding-right: 12;
    border-bottom-width: 1;
    border-bottom-color: #274867;
  }
  .symbol {
    color: white;
    font-size: 20;
  }
  .action1 {
    color: #01ECF4;
    font-size: 14;
    background-color:transparent;
    border: none;
    margin-right: 10;
  }
  .action2, .action3 {
    color: white;
    font-size: 14;
    background-color:transparent;
    border: none;
  }

  .action2 {
    margin-right: 10;
  }


  .label {
    color: #6292BE;
    font-size: 12;
  }
  .cell-content {
    color: white;
    font-size: 14;
    margin-top: 10;
  }
  .dots {
    width: 22;
    height: 22;
    margin-right: -5;
  }
</style>
